<template>
  <div class="container bgc">
    <div class="w1300 center-wrap">
      <div class="header-wrap">
        <h2>{{ courseData.courseName }}</h2>
        <p v-html="courseData.introduce"></p>
        <div class="btn-group flex-yc">
          <span>
            ¥
            <b>{{ courseData.coursePrice }}</b>
          </span>
          <el-button class="study" type="primary" size="small" round>
            立即学习
          </el-button>
          <el-button type="primary" size="small" round>加入购物车</el-button>
          <el-button type="danger" size="small" round>立即购买</el-button>
        </div>
        <ul class="flex-yc">
          <li>
            时长：
            <b>{{ courseData.periodCount }}小时</b>
          </li>
          <li>
            学习人数：
            <b>{{ courseData.countStudy }}</b>
          </li>
          <li>
            综合评分：
            <b>{{ courseData.scoreAvg }}</b>
          </li>
        </ul>
      </div>

      <div class="con-wrap flex flex-xbt">
        <div class="curse-wrap">
          <div class="teacher-info">
            <h3>老师介绍</h3>
            <div class="t-con-wrap">
              <div class="flex-yc">
                <img
                  class="a"
                  :src="lecturerData.lecturerHead"
                  @click="
                    $router.push({
                      path: '/course/lecturer',
                      query: { lecturerId: lecturerData.id },
                    })
                  "
                />
                <div class="name-career flex-y">
                  <b>{{ lecturerData.lecturerName }}</b>
                  <span>{{ lecturerData.lecturerPosition }}</span>
                </div>
              </div>
              <p v-html="lecturerData.introduce"></p>
            </div>
          </div>

          <div class="course-list">
            <ul>
              <li :class="{ active: tabIndex === 1 }" @click="onClickCourse(1)">
                课程介绍
              </li>
              <li :class="{ active: tabIndex === 2 }" @click="onClickCourse(2)">
                目录
              </li>
              <li :class="{ active: tabIndex === 3 }" @click="onClickCourse(3)">
                评价（2000）
              </li>
            </ul>
            <div class="list">
              <div v-show="tabIndex === 1" v-html="courseData.introduce"></div>
              <el-collapse
                class="collapse"
                v-show="tabIndex === 2"
                v-model="activeNames"
                @change="handleChange"
              >
                <el-collapse-item
                  :title="item.chapterName"
                  :name="item.id"
                  v-for="item in courseDirectoryList"
                  :key="item.id"
                >
                  <ul class="flex-y">
                    <li
                      v-for="(child, i) in item.periodViewRespList"
                      :key="child.id"
                    >
                      <div
                        class="flex-yc"
                        @click="onSourcePlay(child.resourceViewResp)"
                      >
                        <i
                          :class="`iconfont icon-${child.resourceViewResp?.resourceType === 1 ? 'play' : 'Subtract'}`"
                        ></i>
                        <span>
                          {{ i }}.
                          {{
                            child.resourceViewResp?.resourceName ||
                            child.periodName
                          }}
                        </span>
                      </div>
                      <p>
                        {{ child.resourceViewResp?.videoLength || '0' }}分钟
                      </p>
                    </li>
                  </ul>
                </el-collapse-item>
              </el-collapse>

              <div class="course-common-wrap" v-show="tabIndex === 3">
                <ul class="common-header flex-yc flex-xbt">
                  <li>
                    <span>综合得分</span>
                    <span class="rate large">10.00</span>
                    <rate-comp :value="5" read></rate-comp>
                  </li>
                  <li>
                    <span>内容实用</span>
                    <span class="rate">10.00</span>
                  </li>
                  <li>
                    <span>简洁易懂</span>
                    <span class="rate">10.00</span>
                  </li>
                  <li>
                    <span>逻辑清晰</span>
                    <span class="rate">10.00</span>
                  </li>
                </ul>
                <div class="write-common-wrap">
                  <ul>
                    <li>评分：</li>
                    <li>
                      <span>内容实用</span>
                      <rate-comp :value="5" allowHalf size="large"></rate-comp>
                    </li>
                    <li>
                      <span>简洁易懂</span>
                      <rate-comp :value="5" allowHalf size="large"></rate-comp>
                    </li>
                    <li>
                      <span>逻辑清晰</span>
                      <rate-comp :value="5" allowHalf size="large"></rate-comp>
                    </li>
                  </ul>
                  <div class="input-wrap">
                    <template v-if="false">
                      <h3>写评价</h3>
                      <div class="warning">
                        <i class="iconfont icon-jinggao"></i>
                        您学习课程进度不足，不能对该课程进行评价
                      </div>
                    </template>
                    <el-input
                      type="textarea"
                      placeholder="填写评论"
                      rows="6"
                    ></el-input>
                    <div class="btn-wrap flex">
                      <el-button class="btn" type="primary">提交</el-button>
                    </div>
                  </div>
                </div>
                <div class="common-wrap">
                  <teacher-comment id=""></teacher-comment>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 相关课程-->
        <div class="recommend-wrap">
          <h2>相关课程</h2>
          <ul>
            <li v-for="item in lecturerCourseList" :key="item.id">
              <router-link
                :to="{ path: '/course/detail', query: { id: item.id } }"
              >
                <h3>{{ item.courseName }}</h3>
                <div class="flex-yc flex-xbt">
                  <span>{{ item.countStudy || 0 }}人已学习</span>
                  <b>
                    <span>¥</span>
                    {{ item.coursePrice || '0.00' }}
                  </b>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <dialog-comp
    v-model="isShowVideo"
    title="详情"
    submitTxt=""
    width="80%"
    :footer="false"
    :center="true"
    top="10px"
  >
    <video-comp :url="videoUrl"></video-comp>
  </dialog-comp>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import RateComp from '@/components/control/rate/index.vue'
import { useCourse } from '@/pages/course/composables/course.ts'
import DialogComp from '@/components/dialog/index.vue'
import VideoComp from '@/components/video/video.vue'
import {
  reqGetCourseCommentList,
  reqGetCourseData,
  reqGetCourseDirectoryList,
} from '@/pages/course/api/course.ts'
import { useRoute } from 'vue-router'
import {
  respCourseData,
  respCourseDirectoryData,
  respSourceViewData,
} from '@/pages/course/api/types/course'
import { respLecturerData } from '@/pages/course/api/types/lecturer'
import TeacherComment from '@/pages/course/components/TeacherComment.vue'

const route = useRoute()
const courseId = route.query.id as string

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}

const { getCourseList, getLecturerData } = useCourse()

const courseData = ref<Partial<respCourseData>>({})
const lecturerData = ref<Partial<respLecturerData>>({})
const courseDirectoryList = ref<respCourseDirectoryData[]>([])
const lecturerCourseList = ref<respCourseData[]>([])

onMounted(async () => {
  // 获取课程详情信息
  courseData.value = await getCourseData(courseId)
  console.log(courseData.value, 78787)
  // 获取讲师信息
  lecturerData.value = await getLecturerData(courseData.value.lecturerId!)
  // 获取目录信息
  courseDirectoryList.value = await getCourseDirectoryList(courseData.value.id!)
  // 获取相关课程信息
  lecturerCourseList.value = await getCourseList({
    lecturerId: courseData.value.lecturerId,
    pageSize: 10,
  })

  getCourseCommentList(courseId)
})

const tabIndex = ref(3)
const onClickCourse = (val: number) => {
  tabIndex.value = val
}

// 获取课程详细
const getCourseData = async (id: string) => {
  const resp = await reqGetCourseData({ id })
  if (resp.code === 200 && resp.data) return resp.data
  return {}
}

// 获取目录列表
const getCourseDirectoryList = async (courseId: string) => {
  let resp = await reqGetCourseDirectoryList({ courseId, pageSize: 1000 })
  if (resp.code === 200 && resp.data) return resp.data.list
  return []
}

const resourceType = ref(0)
const isShowVideo = ref(false)
const videoUrl = ref('')
const onSourcePlay = (data: respSourceViewData) => {
  resourceType.value = data.resourceType
  if (data.resourceType == 1) {
    isShowVideo.value = true
    videoUrl.value = data.resourceUrl
  } else if (data.resourceType == 3) {
  }
}

const commonList = ref([])
const getCourseCommentList = async (id: string) => {
  await reqGetCourseCommentList({ courseId: id, pageSize: 10 })
}
</script>

<style scoped lang="scss">
.container {
  padding-bottom: 50px;
  overflow: auto;
  .center-wrap {
    position: relative;
  }

  .header-wrap {
    padding: 23px 15px;
    margin-top: 16px;
    background-color: #fff;

    > h2 {
      margin-bottom: 10px;
      font-size: 24px;
      color: #021429;
    }

    > p {
      width: 960px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #8691a3;
    }

    > .btn-group {
      margin: 32px 0 12px;

      span {
        margin-right: 72px;
        font-size: 14px;
        color: #ea3553;

        b {
          font-size: 24px;
        }
      }

      .study {
        margin-right: 72px;
      }
    }

    > ul {
      li {
        padding: 0 20px;
        font-size: 14px;
        font-weight: 400;
        color: #9ba1a8;
        border-right: 1px solid #9ba1a8;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
          border-right: 0;
        }

        b {
          color: #021429;
        }
      }
    }
  }

  .con-wrap {
    margin-top: 16px;

    .curse-wrap {
      width: 1006px;

      .teacher-info {
        background-color: #fff;

        h3 {
          padding: 14px 20px;
          font-size: 16px;
          color: #021429;
          border-bottom: 1px solid $borderCol;
        }

        .t-con-wrap {
          padding: 30px 20px;

          img {
            width: 54px;
            height: 54px;
            background-color: #eee;
            border-radius: 50%;
          }

          .name-career {
            margin-left: 14px;

            b {
              font-size: 16px;
              color: #021429;
            }

            span {
              margin-top: 5px;
              font-size: 14px;
              color: #8691a3;
            }
          }

          > p {
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #9ba1a8;
          }
        }
      }

      .course-list {
        margin-top: 16px;
        background-color: #fff;

        > ul {
          display: flex;
          padding: 0 20px;
          border-bottom: 1px solid #f2f2f2;

          li {
            padding: 14px 0;
            font-size: 16px;
            color: #021429;
            cursor: pointer;

            &:hover,
            &.active {
              color: $primary;
            }

            & + li {
              margin-left: 80px;
            }
          }
        }

        .list {
          padding: 0 20px;
          padding-bottom: 20px;

          :deep {
            .el-collapse {
              border-top: 0;
            }
            .el-collapse-item__header {
              padding-left: 20px;
              margin-top: 22px;
              font-size: 16px;
              color: #021429;
              background-color: #f5f8fa;
            }

            .el-collapse-item__content {
              padding-bottom: initial;
            }
          }

          .collapse ul {
            li {
              padding: 12px 20px 15px;

              & + li {
                border-top: 1px solid $borderCol;
              }

              > .flex-yc {
                font-size: 16px;
                color: $primary;

                i {
                  margin-right: 8px;
                  font-size: 16px;
                }
              }

              p {
                margin-top: 5px;
                font-size: 14px;
                color: #8691a3;
              }
            }
          }

          .course-common-wrap {
            margin-top: 22px;
            .common-header {
              padding: 20px 22px;
              background-color: rgba(58, 172, 227, 0.15);
              border-radius: 8px;
              li {
                display: flex;
                align-items: center;
                span {
                  font-size: 16px;
                  font-weight: 500;
                  margin-right: 13px;
                  &.rate {
                    color: $primary;
                    &.large {
                      font-size: 30px;
                    }
                  }
                }
              }
            }
            .write-common-wrap {
              margin-top: 16px;
              background-color: #f7f8fa;
              border-radius: 5px;
              > ul {
                display: flex;
                align-items: center;
                padding: 17px 20px;
                li {
                  display: flex;
                  align-items: center;
                  margin-right: 50px;
                  &:first-child {
                    margin-right: 100px;
                  }
                  span {
                    font-size: 16px;
                    margin-right: 5px;
                  }
                }
              }
              .input-wrap {
                background-color: #f7f8fa;
                border-top: 1px solid #fff;
                height: 214px;
                border-radius: 0 0 8px 8px;
                padding: 18px 20px;
                h3,
                .warning {
                  font-size: 14px;
                  color: #8691a3;
                }
                .warning {
                  text-align: center;
                  margin-top: 60px;
                }
                :deep(.el-textarea) {
                  textarea {
                    border: 0;
                    box-shadow: initial;
                  }
                }
                .btn-wrap {
                  justify-content: flex-end;
                  .btn {
                    margin-top: 10px;
                  }
                }
              }
            }
            .common-wrap {
              margin-top: 35px;
            }
          }
        }
      }
    }

    .recommend-wrap {
      flex: 1;
      margin-left: 15px;
      background-color: #fff;

      h2 {
        padding: 14px 16px;
        font-size: 16px;
        line-height: 16px;
        color: rgb(4 7 36 / 85%);
        border-bottom: 1px solid $borderCol;
      }

      ul {
        li {
          padding: 12px 0;
          margin: 0 16px;

          & + li {
            border-top: 1px solid $borderCol;
          }

          &:hover {
            h3 {
              color: $primary;
            }
          }

          h3 {
            font-size: 14px;
            font-weight: 400;
            color: #021429;
          }

          .flex-yc {
            margin-top: 16px;

            > span {
              font-size: 12px;
              color: #8691a3;
            }

            b {
              font-size: 24px;
              color: #ea3553;

              span {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
